<!-- 
使用例子：
<jp-btn-filter-popup ref="filterPopup" :list="filterList" @filter="onFilter"></jp-btn-filter-popup>

//open popup
this.$refs.filterPopup.show = true

//filterList
	[{
			title: "人群类型",
			titleValue: 'pastHistory',
			list: [{
				name: '全部',
				value: '-1',
				selected: true
			},{
				name: 'aaaa',
				value: '0',
				selected: false
			}],
		},
		{
			title: "既往史",
			titleValue: 'personTag',
			list: [{
				name: '全部',
				value: '-1',
				selected: true
			},{
				name: 'aaaa',
				value: '0',
				selected: false
			}],
		}
	]

//this.queryParams为接口入参对象
onFilter(data) {
	if(data.pastHistory && data.pastHistory.length>0){
	this.queryParams.pastHistory = data.pastHistory
}else {
	this.queryParams.pastHistory = null
}

if(data.personTag && data.personTag.length>0){
	this.queryParams.personTag = data.personTag
}else {
	this.queryParams.personTag = null
}
//调用接口
}, -->

<template>
	<jp-popup ref="jpPopup" mode="top">
		<view class="popup-content">
			<view class="condition-wrap" v-for="(item,index) in dataList" :key="index">
				<text class="title">{{item.title}}</text>
				<view class="jp-flex-wrap condition-list">
					<view class="condition-item" :style="[conditionItemStyle]" v-for="(subItem,subIndex) in item.list"
						:key="subIndex">
						<view class="condition-item2" :class="{'active': subItem.selected == true}"
							@click="onClick(item,subItem,index)">
							<jp-ellipsis-text :color="subItem.selected?'var(--uni-color-primary)':'#4D5566'" :lines="1"
								align="center">{{subItem[keyName]}}</jp-ellipsis-text>
						</view>
					</view>
				</view>
			</view>
			<slot></slot>
		</view>
		<template #footer>
			<view class="jp-flex-row popup-btn-wrap">
				<button class="jp-expanded" @click="resetCondition">重置</button>
				<button class="jp-expanded" style="background-color: var(--uni-color-primary);color: white;"
					@click="confirm">确认</button>
			</view>
		</template>
	</jp-popup>
</template>

<script>
	export default {
		name: "jp-btn-filter-popup",
		props: {
			list: {
				type: Array,
				default: () => [],
				require: true
			},
			keyName: {
				type: String,
				default: 'name',
				require: false
			},
			keyCode: {
				type: String,
				default: 'value',
				require: false
			},
			defaultKeyCode: {
				type: String,
				default: '-1',
				require: false
			},
			multiple: {
				type: Boolean,
				default: true,
				require: false,
			},
			columnNumber: { //默认一行三个按钮
				type: Number,
				default: 3,
			}
		},
		watch: {
			columnNumber: {
				handler(newVal) {
					if (newVal == null || newVal == 0) {
						newVal = 3
					}
					this.conditionItemStyle.width = 100 / newVal + '%'
				},
				immediate: true
			},
			show(e) {
				this.$refs.jpPopup.show = e
			}
		},
		mounted() {
			this.dataList = JSON.parse(JSON.stringify(this.list))
		},
		data() {
			return {
				show: false,
				isModify: false,
				dataList: [],
				conditionItemStyle: {
					"width": "33.3333%"
				},
				seletedObj: {

				},
			};
		},
		methods: {
			onClick(item, subItem, index) {
				this.isModify = true
				if (this.multiple == true) {
					//多选
					if (subItem[this.keyCode] == '-1') {
						item.list.forEach((obj) => {
							this.$set(obj, 'selected', false)
						})
						this.$set(subItem, 'selected', true)
						this.seletedObj[item.titleValue] = []
						return
					}
					this.$set(item.list[0], 'selected', false)
					if (this.seletedObj[item.titleValue]) {
						let subItemArray = this.seletedObj[item.titleValue]
						let objIndex = subItemArray.findIndex(obj => {
							if (obj.name == subItem[this.keyName]) {
								return true
							}
						})
						if (objIndex >= 0) {
							subItemArray.splice(objIndex, 1)
							this.$set(subItem, 'selected', false)
						} else {
							this.$set(subItem, 'selected', true)
							subItemArray.push({
								code: subItem[this.keyCode],
								name: subItem[this.keyName]
							})
						}
					} else {
						this.$set(subItem, 'selected', true)
						this.seletedObj[item.titleValue] = []
						this.seletedObj[item.titleValue].push({
							code: subItem[this.keyCode],
							name: subItem[this.keyName]
						})
					}
				} else {
					//单选
					item.list.forEach((obj) => {
						this.$set(obj, 'selected', false)
					})
					this.$set(subItem, 'selected', true)
					this.seletedObj[item.titleValue] = []
					if (subItem[this.keyCode] != '-1') {
						this.seletedObj[item.titleValue].push({
							code: subItem[this.keyCode],
							name: subItem[this.keyName]
						})
					}
				}

			},
			confirm() {
				this.show = false
				if (this.isModify) {
					console.log('【jp-btn-filter-popup】confirm=>' + JSON.stringify(this.seletedObj))
					this.$emit('filter', this.seletedObj)
				}
				this.isModify = false
			},
			resetCondition() {
				this.isModify = true
				this.seletedObj = {}
				this.dataList.forEach((item) => {
					if (item.list) {
						item.list.forEach((subItem) => {
							if (subItem[this.keyCode] == this.defaultKeyCode) {
								if (this.multiple == false && subItem[this.keyCode] != '-1') {
									this.seletedObj[item.titleValue] = []
									this.seletedObj[item.titleValue].push({
										code: subItem[this.keyCode],
										name: subItem[this.keyName]
									})
								}
								this.$set(subItem, 'selected', true)
							} else {
								this.$set(subItem, 'selected', false)
							}

						})
					}
				})
				this.$emit('reset')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		padding: 24rpx 0 24rpx 0;

		.condition-wrap {
			.title {
				padding: 0 32rpx;
				font-size: 32rpx;
				line-height: 48rpx;
			}

			.condition-list {
				padding: 0 16rpx;

				.condition-item {
					background-color: white;
					padding: 16rpx;

					.condition-item2 {
						box-sizing: border-box;
						font-size: 28rpx;
						text-align: center;
						height: 80rpx;
						line-height: 80rpx;
						color: #4D5566;
						background: #F2F3F5;
						border-radius: 8rpx;

						&.active {
							font-weight: 600;
							font-size: 28rpx;
							color: var(--uni-color-primary);
							border: 2rpx solid var(--uni-color-primary);
						}

						text {
							white-space: nowarp;
							/*强制在一行显示*/
							text-overflow: ellipsip;
							/*溢出显示省略号*/
						}
					}

				}


			}
		}
	}

	.popup-btn-wrap {
		padding: 24rpx 16rpx;
		border-top: 2rpx solid #E1E4E9;

		button {
			margin: 0 16rpx;
			font-size: 32rpx;
		}
	}
</style>